<app-cheat-sheet [cheatSheet]="cheatSheet">

    <p>
        <strong>Description: </strong> First item represents the type of machine
        that's expected to assemble the following components.
        <br> Following items represent the amount of <strong>machines</strong> needed making them.
        If there is no machine mixing (assemblers/chemical plants/furnaces)
        then ratios stay the same between assembly tiers.
        <br>
    </p>

    <p class="text-center">
        <span class="text-muted d-inline-block">Machine speeds</span>
        <span class=" d-block">
            <ng-container *ngFor="let machine of sheetData?.machineCraftSpeed">
                <app-factorio-icon class="mx-2" *ngIf="machine.iconId" [icon]="dataService.getFactorioIcon(machine?.iconId, machine?.speed)">
                </app-factorio-icon>
            </ng-container>
        </span>
    </p>

    <p>
        <strong>For example:</strong> To make rails,
        the right ratio is 1 iron stick assembler feeding 2 rail assemblers.
        <br> Using the level 3 assemblers you can produce 10 rails every second.
        <br>Go to the <a href="#links">links</a> section of this page, for blueprints and calculators.
    </p>

    <div class="row">
        <div class="col-12 col-md-6">
            <div class="list-group fixed-width">
                <a *ngFor="let data of sheetData?.scienceRatios" class="list-group-item" href="{{ data.source }}" title="{{ data.name }}" target="_blank" rel="noopener">
                    <ng-container *ngFor="let item of data.ratio; let idx=index">
                        <app-factorio-icon *ngIf="item.iconId" [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                        </app-factorio-icon>
                        <span *ngIf="idx == 0"> <i class="fas fa-arrows-alt-h text-muted"></i> </span>
                        <small *ngIf="item.comment"><br>*{{ item?.comment }}</small>
                    </ng-container>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="list-group fixed-width">
                <a *ngFor="let data of sheetData?.electronicsRatios" class="list-group-item" href="{{ data.source }}" title="{{ data.name }}" target="_blank" rel="noopener">
                    <ng-container *ngFor="let item of data.ratio; let idx=index">
                        <app-factorio-icon *ngIf="item.iconId" [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                        </app-factorio-icon>
                        <span *ngIf="idx == 0"> <i class="fas fa-arrows-alt-h text-muted"></i> </span>
                        <small *ngIf="item.comment" class="text-muted"><br>*{{ item?.comment }}</small>
                    </ng-container>
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-6">
            <div class="list-group fixed-width">
                <a *ngFor="let data of sheetData?.productionRatios" class="list-group-item" href="{{ data.source }}" title="{{ data.name }}" target="_blank" rel="noopener">
                    <ng-container *ngFor="let item of data.ratio; let idx=index">
                        <app-factorio-icon [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                        </app-factorio-icon>
                        <span *ngIf="idx == 0"> <i class="fas fa-arrows-alt-h text-muted"></i> </span>
                        <small *ngIf="item.comment" class="text-muted"><br>{{ item?.comment }}</small>
                    </ng-container>
                </a>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="list-group fixed-width">
                <a *ngFor="let data of sheetData?.miscRatios" class="list-group-item" href="{{ data.source }}" title="{{ data.name }}" target="_blank" rel="noopener">
                    <ng-container *ngFor="let item of data.ratio; let idx=index">
                        <app-factorio-icon [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                        </app-factorio-icon>
                        <span *ngIf="idx == 0"> <i class="fas fa-arrows-alt-h text-muted"></i> </span>
                    </ng-container>
                </a>
            </div>
        </div>
    </div>

    <hr>
    <h3 id="rocket">Rocket Components</h3>
    <div class="row align-items-center">
        <p class="col-12 col-sm-4 text-center">
            <!-- <span class="text-muted">{{ sheetData?.rocketComponentsRatioNoSatellite?.name }}</span><br> -->
            <a href="{{ sheetData?.rocketComponentsRatioNoSatellite.source }}" target="_blank" rel="noopener">
                {{ sheetData?.rocketComponentsRatioNoSatellite?.name }}
            </a>
            <br>
            <ng-container *ngFor="let item of sheetData?.rocketComponentsRatioNoSatellite.ratio">
                <app-factorio-icon [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                </app-factorio-icon>
            </ng-container>
        </p>

        <p class="col-12 col-sm-4 text-center">
            <!-- <span class="text-muted">{{ sheetData?.rocketComponentsRatioWithSatellite?.name }}</span><br> -->
            <a href="{{ sheetData?.rocketComponentsRatioWithSatellite.source }}" target="_blank" rel="noopener">
                {{ sheetData?.rocketComponentsRatioWithSatellite?.name }}
            </a>
            <br>
            <ng-container *ngFor="let item of sheetData?.rocketComponentsRatioWithSatellite.ratio">
                <app-factorio-icon [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                </app-factorio-icon>
            </ng-container>
        </p>

        <p class="col-12 col-sm-4 text-center">
            <!-- <span class="text-muted">{{ sheetData?.rocketComponentsModuledRatioWithSatellite?.name }}</span><br> -->
            <a href="{{ sheetData?.rocketComponentsModuledRatioWithSatellite.source }}" target="_blank" rel="noopener">
                {{ sheetData?.rocketComponentsModuledRatioWithSatellite?.name }}
            </a>
            <br>
            <ng-container *ngFor="let item of sheetData?.rocketComponentsModuledRatioWithSatellite.ratio">
                <app-factorio-icon [icon]="dataService.getFactorioIcon(item?.iconId, item?.count)">
                </app-factorio-icon>
            </ng-container>
        </p>
    </div>

    <ul>
        <li>
            A Rocket needs 100 <a href="https://wiki.factorio.com/Rocket_part" target="_blank" rel="noopener">Rocket
                Parts</a>.
        </li>
        <li>
            To get <a href="https://wiki.factorio.com/Space_science_pack" target="_blank" rel="noopener">Space Science</a>
            (no productivity modules in the silo); <br> a rocket needs 1000 of each component of the rocket part + the
            requirements for the <a href="https://wiki.factorio.com/Satellite">satellite</a>.
        </li>
        <li>This is a ratio of (1100 * 20) : (1050 * 30) : (1000 * 30) or simplified of 44 : 63 : 60.</li>
        <li>Where 20 and 30 are the respective crafting speeds.</li>
        <li>Module ratio is approximate with lvl 3 productivity modules</li>
    </ul>

</app-cheat-sheet>
